// 导入样式入口文件
@import './styles/index.scss';

// 页面容器样式
.taro-page {
  min-height: 100vh;
  background-color: var(--background-color-base);
  color: var(--text-color-primary);
}

// TabBar 页面底部留白
.tabbar-page {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// 页面通用过渡动画
.page-enter-active,
.page-leave-active {
  transition: all 0.3s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

// 安全区域适配
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

// 骨架屏动画
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--background-color-light) 25%,
    var(--background-color-lighter) 37%,
    var(--background-color-light) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

// 页面加载状态
.page-loading {
  @include flex(column, center, center);
  min-height: 100vh;
  background-color: var(--background-color-base);
}

// 空状态
.empty-status {
  @include flex(column, center, center);
  padding: $spacing-extra-large;
  color: var(--text-color-secondary);
  
  &__icon {
    font-size: 48px;
    margin-bottom: $spacing-base;
  }
  
  &__text {
    font-size: $font-size-base;
  }
}

// 错误状态
.error-status {
  @include flex(column, center, center);
  padding: $spacing-extra-large;
  color: var(--error-color);
  
  &__icon {
    font-size: 48px;
    margin-bottom: $spacing-base;
  }
  
  &__text {
    font-size: $font-size-base;
    margin-bottom: $spacing-base;
  }
  
  &__retry {
    @include button-base;
    background-color: var(--error-color);
    color: #fff;
    
    &:hover {
      background-color: lighten($error-color, 10%);
    }
  }
}

// 禁止页面滚动
.overflow-hidden {
  overflow: hidden;
}

// 底部安全区域占位
.bottom-safe-area {
  width: 100%;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
}

// 通用列表样式
.list-view {
  background-color: var(--background-color-extra-light);
  
  &__item {
    @include flex(row, space-between, center);
    padding: $spacing-base;
    background-color: var(--background-color-extra-light);
    
    &:active {
      background-color: var(--background-color-light);
    }
    
    &--border {
      @include border-1px($direction: bottom);
    }
  }
}

// 通用按钮样式
.btn {
  @include button-base;
  
  &--primary {
    background-color: var(--primary-color);
    color: #fff;
    
    &:hover {
      background-color: lighten($primary-color, 10%);
    }
  }
  
  &--success {
    background-color: var(--success-color);
    color: #fff;
    
    &:hover {
      background-color: lighten($success-color, 10%);
    }
  }
  
  &--warning {
    background-color: var(--warning-color);
    color: #fff;
    
    &:hover {
      background-color: lighten($warning-color, 10%);
    }
  }
  
  &--error {
    background-color: var(--error-color);
    color: #fff;
    
    &:hover {
      background-color: lighten($error-color, 10%);
    }
  }
  
  &--info {
    background-color: var(--info-color);
    color: #fff;
    
    &:hover {
      background-color: lighten($info-color, 10%);
    }
  }
}